<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态可视化挖掘</title>
    <style>
        .page-wrap{top:4%;width:100%;height:96vh;background-color:white;position:absolute;display:flex;}
        .button-wrap{position: absolute;left: 1%;top: -3%;height: 10%;background-color: transparent;z-index: 1;}
        .description-button-wrap{position: absolute;right: 1%;top: -3%;height: 10%;background-color: transparent;z-index: 1;}
        
    </style>
</head>
<body>
    <div class="page-wrap">
        <div class="button-wrap">
            <button onclick="handleImageClick('自然地标·文化符号')">自然地标·文化符号</button>
            <button onclick="handleImageClick('佛教名山')">佛教名山</button>
            <button onclick="handleImageClick('道教名山')">道教名山</button>
            <button onclick="handleImageClick('自然风光旅游景区')">自然风光旅游景区</button>
            <button onclick="handleImageClick('历史文化传承景区')">历史文化传承景区</button>
            <button onclick="handleImageClick('城市休闲娱乐景区')">城市休闲娱乐景区</button>
            <button onclick="handleImageClick('历史-民俗-商业综合景区')">历史-民俗-商业综合景区</button>
            <!-- <button onclick="closePage()">关闭画廊</button> -->
        </div>
        <div class="description-button-wrap">
            <button id="description-button" onclick="showDescription(currentImage)">当前视图说明</button>
        </div>
    </div>


    <script>
        function handleImageClick(nextImage) {
            currentImage = nextImage;
            var url = ''
            switch (currentImage) {
                case '自然地标·文化符号':
                    url = 'pics/symbols.png';
                    break;
                case '佛教名山':
                    url = 'pics/mountains_fo.png';
                    break;
                case '道教名山':
                    url = 'pics/mountains_dao.png';
                    break;
                case '自然风光旅游景区':
                    url = 'pics/自然风光旅游景区.png';
                    break;
                case '历史文化传承景区':
                    url = 'pics/历史文化传承景区.png';
                    break;
                case '城市休闲娱乐景区':
                    url = 'pics/城市休闲娱乐景区.png';
                    break;
                case '历史-民俗-商业综合景区':
                    url = 'pics/历史-民俗-商业综合景区.png';
                    break;
                default:
                    url = '';
            }
            addImage(url);
        }

        
        function addImage(url) {
            var pageWrap = document.querySelector('.page-wrap');
            var image = new Image();
            image.src = url;
            image.onload = function() {
                var imageWidth = image.width;
                var imageHeight = image.height;
                var pageWrapWidth = pageWrap.offsetWidth;
                var pageWrapHeight = pageWrap.offsetHeight;
                var scaleFactor = Math.min(pageWrapWidth / imageWidth, pageWrapHeight / imageHeight);
                var scaledWidth = imageWidth * scaleFactor;
                var scaledHeight = imageHeight * scaleFactor;
                var left = (pageWrapWidth - scaledWidth) / 2;
                var top = (pageWrapHeight - scaledHeight) / 2;
                var imageDiv = document.createElement('div');
                imageDiv.style.position = 'absolute';
                imageDiv.style.left = left + 'px';
                imageDiv.style.top = top + 'px';
                imageDiv.style.width = scaledWidth + 'px';
                imageDiv.style.height = scaledHeight + 'px';
                imageDiv.style.backgroundImage = 'url(' + url + ')';
                imageDiv.style.backgroundSize = 'contain';
                pageWrap.appendChild(imageDiv);
            };
        }

        function closePage() {
            window.close();
        }

        function showDescription(currentImage) {
            var description = '';
            switch (currentImage) {
                case '自然地标·文化符号':
                    description = 
                    "我国5A景区与文化遗产密切相关，大致可分为以下五类：\n1. 历史建筑和古迹：如故宫、长城、兵马俑等。\n2. 文化遗址和遗产：如丝绸之路、洛阳龙门石窟等。\n3. 传统艺术和表演：如西安大唐芙蓉园的壁画和舞蹈、印象西湖的表演秀等。\n4. 民俗风情和传统节日（少数民族）：如丽江古城的纳西族文化、恩施神龙溪的纤夫文化等。\n5. 文化教育和研究：如故宫博物院、兵马俑博物馆等。\n这些文化遗产不仅是景区的核心吸引力，也是游客了解和体验我国历史与文化的重要途径。通过这些景区，游客可以欣赏到我国古代建筑艺术、探索历史遗址、领略传统艺术表演、体验民俗风情，并参观文化教育和研究机构来深入学习和了解文化遗产。"
                    break;
                case '佛教名山':
                    description = "我国佛教名山分布广泛，地理特性多样。普陀山、九华山、嵩山、五台山和衡山等名山分布在全国各地，展现了多元而广泛的地理特色。普陀山位于浙江省的舟山群岛，是观音菩萨的道场。九华山位于安徽省中南部，是地藏王菩萨的道场。与此相比，五台山位于山西省东北部，是文殊菩萨的道场，而嵩山位于河南省中部，是尊胜陀罗尼咒的道场。衡山位于湖南省中部，被称为南国佛地，是南方大地的禅宗道场。这些名山各具特色，拥有丰富的历史和文化资源，吸引了众多朝圣者和游客。它们是佛教信仰的重要中心，展现了我国佛教的多元性。";
                    break;
                case '道教名山':
                    description = "我国道教名山分布全国各地：如华山位于陕西省东部，被视为道教的“西岳”，以险峻的山势和古老的道教文化闻名。衡山位于湖南省，被誉为道教的“南岳”，在此地道教和佛教文化相互交融。武当山位于湖北省西北部，是道教的重要圣地和全真派道教的中心，也是太极拳的发源地。青城山和峨眉山位于四川省，青城山是全真派和太平派的道教圣地，而峨眉山则是道教与佛教共存的重要山地。这些道教名山各具特色，以其独特的地理位置、壮丽的山水景色和深厚的道教文化历史吸引着来自世界各地的游客和道教信徒。";
                    break;
                case '自然风光旅游景区':
                    description = "我国共有181个自然风光旅游类型的5A景区，遍布东西南北中：在西南地区，如云南的玉龙雪山和贵州的黄果树瀑布等景区以壮丽的山水风光和多样的植被闻名，还有丰富的民族文化可体验。而西北地区的青海湖、甘肃的丹霞地貌和新疆的天山天池等景区，以高山、草原和湖泊等恢弘景观吸引游客，也成为科研和生态保护的重要基地。东南沿海地区的景区如福建的鼓浪屿以迷人的海景和浓厚的海洋文化闻名。此外，中部地区的湖南衡山、张家界等景区让游客亲身感受大自然的魅力。这些5A景区以其丰富的自然景观和生态资源，展示了我国大陆不同地区的自然之美，让人们领略大自然的伟力和魅力。";
                    break;
                case '历史文化传承景区':
                    description = "我国有80个历史文化传承类的5A级景区，分布广泛，多集中在北部地区和东部沿海地区，以悠久的历史和多元的文化闻名：北京的故宫、长城，洛阳的龙门石窟，西安的兵马俑等景区展示了宏伟建筑和珍贵文物，反映了古代我国的政治、经济和文化。南方的苏州园林、杭州西湖展示了文人雅士的生活和园林艺术。上海一大·二大·四大纪念馆和南京中山陵揭示了我国近现代历史。这些景区不仅是旅游胜地，也是我国历史文化的象征，吸引着世界各地的游客了解祖国传统文化。";
                    break;
                case '城市休闲娱乐景区':
                    description = "我国有25个城市休闲娱乐型的5A景区，主要分布在大城市和旅游热点地区。这些景区提供了丰富多样的娱乐和休闲设施，如主题公园、水上乐园和温泉度假村等。以广州长隆为例，它拥有丰富的动物园和主题公园，吸引了大量游客。这些景区不仅满足了城市居民和游客的娱乐需求，也促进了城市的发展和经济增长。这些景区为城市居民提供了多样的娱乐和休闲选择，同时也对城市形象和社会经济的发展做出了贡献。";
                    break;
                case '历史-民俗-商业综合景区':
                    description = "我国共有33个历史-民俗-商业综合型的5A景区，主要集中在西部和东部的历史文化名城和风景名胜区。在西部地区，如重庆的濯水景区、四川的安仁古镇景区以及贵州的青岩古镇景区等，这些景区将丰富的历史遗迹、传统的民俗风情和独特的商业元素融合在一起，提供了综合性的旅游体验，游客可以购买手工艺品和土特产品等。而在东部地区，如上海的东方明珠和杭州的西湖周边，这些景区将历史街道和建筑与现代商业区结合，形成了独特的城市风景。";
                    break;
                default:
                    description = '';
            } 
            alert(description);
        }

        addImage('pics/symbols.png');
        var currentImage = '自然地标·文化符号';
    </script>
</body>
</html>
